Programming with Wijmo Control Extensions

All of the Wijmo control extensions, as well as the screen templates that use them, are designed to work as-is without modifications to the generated code. As discussed previously, you may need to rearrange some content items in the designer, but in general you do not need to be a JavaScript expert in order to use this product.

Due to the limitations of the extensibility model in the HTML Client, all customizations must be performed in the generated JavaScript code. The following table shows the mapping between the available widgets in the control extensions and the corresponding Wijmo control. The links in the second column open the online help for that Wijmo control.

Widget	Wijmo Control
Bar Chart	wijbarchart
Calendar	wijcalendar
Events Calendar	wijevcal
Gallery	wijgallery
Grid	wijgrid
Line Chart	wijlinechart
Linear Gauge	wijlineargauge
Pie Chart	wijpiechart
Radial Gauge	wijradialgauge
Rating	wijrating
Scatter Chart	wijscatterchart

You can use the online help to discover additional settings for each control. For example, the wijcalendar control supports an allowPreview option that displays a popup calendar for the next or previous month when the user points to one of the indicators on either side of the control. To enable this option, edit the generated code for the Calendar widget and find the control’s constructor. This is the first function call that has the same name as the Wijmo control. In this case, the default constructor is as follows:

Script	Copy Code
div.wijcalendar({ selectionMode: {day: true}, displayDate: contentItem.value });

All you need to do is insert the new option and make sure that all options are separated by a comma. The order of the options does not matter.

Script	Copy Code
div.wijcalendar({ allowPreview: true, selectionMode: {day: true}, displayDate: contentItem.value });

When you are reading the Wijmo documentation, remember that it was written from the perspective of a standalone HTML page viewed in a desktop browser, and that it predates the LightSwitch HTML Client. In particular, you should skip over the examples that show how to populate a control with data, as this is already handled by the generated code.